<template>
  <div>
    <div class="menu">
      <ul id="gn-menu" class="gn-menu-main">
        <a href="/" style="cursor: pointer; width: 200px">
          <div style="margin-top: -15px; margin-left: 20px; display: flex;flex-direction: row;justify-content: left;align-items: center">
            <img
              src="../../../static/img/logo.png"

              style=" height: 80px; width: 86px"
            />

           <span style="font-size: 23px; letter-spacing: -0.5px;color: #d7341fa6; margin-top: 7px;font-family: Helvetica; "> AImeeting</span>
          </div>

        </a>
        <li class="gn-trigger">
          <el-col :span="24">
            <div style="height: 100%; width: 100%;"></div>
          </el-col>
          <el-row>
            <el-col
              class="rounded shadow"
              :offset="4"
              :span="22"
              style="height: 560px; overflow: hidden; text-align: left;border-width: 0;"
            >
              <!--      开启Vue Router模式-->
              <el-menu :router="true" :default-active="index" active-text-color="#d7341fa6">
                <el-menu-item index="index" class="hover-red">
                  <i class="el-icon-s-data"></i>
                  <span slot="title">会议总览</span>
                </el-menu-item>
                <el-menu-item class="hover-red" index="meetingRoom">
                  <i class="el-icon-document"></i>
                  <span slot="title">会议室管理</span>
                </el-menu-item>
                <el-menu-item class="hover-red" index="department">
                  <i class="el-icon-coordinate"></i>
                  <span slot="title">部门管理</span>
                </el-menu-item>
                <el-menu-item class="hover-red" index="record">
                  <i class="el-icon-s-claim"></i>
                  <span slot="title">会议记录</span>
                </el-menu-item>
                <el-menu-item class="hover-red" index="inform">
                  <i class="el-icon-message"></i>
                  <span slot="title">通知公告</span>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </li>
        <!--        <li><router-link class="gn-icon gn-icon-kongzhitaishouye" to="/">首页</router-link></li>-->

        <li style="width: 160px; margin-top: -45px;">
          <div class="user-avator">
            <img src="../../../static/img/avatar.jpg" height="40" width="40" />
          </div>
          <!-- 用户名下拉菜单 -->
          <el-dropdown class="user-name" trigger="click">
            <span> 管理员 <i class="el-icon-caret-bottom"></i> </span>
            <el-dropdown-menu class="dropdown" slot="dropdown">
              <el-dropdown-item>
                <router-link class="el-dropdown-link" to="/login"
                  >退出登录
                </router-link>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "Navigation",
  data() {
    return {
      openAll: false,
      openSub: true
    };
  },
  computed: {
    index: function() {
      return this.$route.path.slice(1);
    }
  },
  methods: {
    handleOpen: function() {
      this.openAll = !this.openAll;
    },
    handleOpenAll: function() {
      this.openAll = true;
    },
    handleOpenSub: function() {
      this.openSub = !this.openSub;
    }
  }
};
</script>

<style scoped>
.menu {
  background: #d7452c;
  width: 100%;
}

@media screen and (max-width: 740px) {
  .codrops-icon span {
    display: none;
  }
}

*,
*:after,
*::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.gn-menu-main,
.gn-menu-main ul {
  margin: 0;
  padding: 0;
  background: white;
  color: #5f6f81;
  list-style: none;
  text-transform: none;
  font-weight: 300;
  font-family: "Lato", Arial, sans-serif;
  line-height: 60px;
}

.gn-menu-main {
  /*display: flex;*/
  /*flex-direction: row;*/

  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  font-size: 13px;
  box-shadow: 0 2px 12px 0 rgba(215, 52, 31, 0.18);
}

.gn-menu-main a {
  display: block;
  height: 100%;
  color: #5f6f81;
  text-decoration: none;
  cursor: pointer;
}

.hover-red:hover {
  background: rgba(215, 52, 31, 0.1);
}

.gn-menu-main > li {
  display: block;
  float: left;
  height: 100%;
  /*border-right: 1px solid #c6d0da;*/
  text-align: center;
}

.gn-menu-main li.gn-trigger {
  position: relative;
  width: 150px;
  top: 40px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.gn-menu-main > li:last-child {
  float: right;
  border-right: none;
  border-left: 1px solid #c6d0da;
}

.gn-menu-main > li > a {
  padding: 0 30px 0 0;
  font-weight: bold;
}

.gn-menu-main > li:first-child > a {
  padding: 0 30px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.gn-menu-main:after {
  display: table;
  clear: both;
  content: "";
}

.gn-menu li:not(:first-child),
.gn-menu li li {
  box-shadow: inset 0 1px #c6d0da;
}

.gn-menu-main > li:not(:first-child):hover > a,
.gn-menu li:hover > a {
  background: rgba(215, 52, 31, 0.57);
  color: #fff;
}

.gn-submenu li {
  overflow: hidden;
  height: 0;
  -webkit-transition: height 0.3s;
  -moz-transition: height 0.3s;
  transition: height 0.3s;
}

.gn-submenu li a {
  color: #c1c9d1;
}

.gn-icon::before {
  display: inline-block;
  width: 60px;
  text-align: center;
  text-transform: none;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  speak: none;
  -webkit-font-smoothing: antialiased;
}

.gn-icon span {
  width: 0;
  height: 0;
  display: block;
  overflow: hidden;
}

.gn-icon-menu::before {
  margin-left: -15px;
  vertical-align: -2px;
  width: 30px;
  height: 3px;
  background: #5f6f81;
  box-shadow: 0 3px white, 0 -6px #5f6f81, 0 -9px white, 0 -12px #5f6f81;
  content: "";
}

.gn-icon-menu :hover::before,
.gn-icon-menu. gn-selected:hover::before {
  background: white;
  box-shadow: 0 3px #eb826f, 0 -6px white, 0 -9px #eb826f, 0 -12px white;
}

.gn-icon-menu.gn-selected::before {
  background: #d7452c;
  box-shadow: 0 3px white, 0 -6px #d7452c, 0 -9px white, 0 -12px #d7452c;
}

.gn-menu-wrapper.gn-open-all,
.gn-menu-wrapper.gn-open-part {
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  transform: translateX(0px);
}

.gn-menu-wrapper.gn-open-all {
  width: 183px;
}

.gn-menu-wrapper.gn-open-all .gn-submenu li {
  height: 60px;
}

.gn-submenu-close {
  display: none;
}

@media screen and (max-width: 422px) {
  .gn-menu-wrapper.gn-open-all {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    transform: translateX(0px);
    width: 100%;
  }

  .gn-menu-wrapper.gn-open-all .gn-scroller {
    width: 130%;
  }
}

.user-avator {
  margin-left: 20px;
  margin-top: 10px;
}

.user-avator img {
  display: block;
  float: left;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.user-name {
  margin-top: -10px;
  margin-left: 20px;
  float: left;
  cursor: pointer;
}

.dropdown {
  height: 50px;
}

.el-dropdown-link {
  color: #888;
}

.el-dropdown-link:hover {
  color: #d7452c;
}
</style>
